<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
    ref="page_body"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >报名名单</el-breadcrumb-item
          >
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="audit_list_content" ref="audit_list_content">
        <el-row>
          <el-col :span="6">
            <div class="padding_box padding_box_left">
              <el-input
                size="mini"
                placeholder="输入关键字"
                v-model="filterText"
                style="margin-bottom: 10px"
              >
              </el-input>
              <el-tree
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :default-checked-keys="defaultCheckedKeys"
                :default-expanded-keys="defaultCheckedKeys"
                ref="tree"
                node-key="id"
                :render-content="renderContent"
                show-checkbox
                :check-on-click-node="true"
                :check-strictly="true"
                @check="nodeClick"
              >
              </el-tree>
            </div>
          </el-col>

          <el-col :span="18">
            <div class="padding_box">
              <!-- 搜索框 -->
              <el-row style="margin-bottom: 10px">
                <el-col :span="24" style="display: flex; align-items: center">
                  <el-input
                    v-model="enrollSearchKey"
                    placeholder="请输入关键词"
                    size="max"
                    style="width: 200px; margin-left: 0px"
                  ></el-input>
                  <el-form label-width="80px">
                    <el-form-item label="部门" label-width="50px">
                      <el-select
                        v-model="areaLisstLIN"
                        placeholder="请选择"
                        @change="arert"
                        clearable
                      >
                        <el-option
                          ref="trs"
                          v-for="item in area"
                          :key="item.department_id"
                          :label="item.department_name"
                          :value="item.department_id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="公司" label-width="50px">
                      <el-select
                        v-model="arelisr"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in ares"
                          :key="item"
                          :label="item"
                          :value="item"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态">
                      <el-select
                        v-model="shenhe"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in shenhelist"
                          :key="item.key"
                          :label="item.value"
                          :value="item.key"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="有无照片">
                      <el-select
                        v-model="is_exist_photo"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in pohen"
                          :key="item.key"
                          :label="item.value"
                          :value="item.key"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="证件类型">
                      <el-select v-model="pass" clearable placeholder="请选择">
                        <el-option
                          v-for="item in passList"
                          :key="item.id"
                          :label="item.pass_name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <el-button
                    type="primary"
                    size="mini"
                    style="margin-left: 5px"
                    @click="searchFn()"
                    >搜索</el-button
                  >
                </el-col>
              </el-row>
              <!-- <el-button
                type="primary"
                size="mini"
                style="margin-left: 10px"
                @click="cwuBatch()"
                >错误日志</el-button
              > -->
              <el-button
                v-if="usdetype != 2"
                type="primary"
                size="mini"
                style="margin-left: 10px"
                @click="batchdeleteFn()"
                >批量删除</el-button
              >
              <el-button
                v-if="usdetype != 2"
                type="primary"
                size="mini"
                style="margin-left: 10px"
                :loading="downloadBtnLoading"
                @click="exportFn()"
                >{{ downloadBtnText }}</el-button
              >
              <el-button
                v-if="usdetype != 2"
                type="primary"
                size="mini"
                style="margin-left: 10px"
                :loading="downloadBtnLoadingpuss"
                @click="exportFnpuss()"
                >{{ downloadBtnTextpuss }}</el-button
              >

              <div
                v-if="enrollListData != undefined && enrollListData.length > 0"
              >
                <el-row>
                  <el-col :span="24">
                    <el-table
                      :data="enrollListData"
                      border
                      size="mini"
                      :cell-style="cellStyleFn"
                      @selection-change="handleSelectionChange"
                      style="width: 100%"
                    >
                      <el-table-column type="selection" width="55">
                      </el-table-column>

                      <el-table-column label="照片" width="100" align="center">
                        <template slot-scope="scope">
                          <img
                            @click="imgViewFn(scope.$index, scope.row)"
                            :src="scope.row.photo"
                            class="table_img"
                          />
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="name"
                        label="姓名"
                        min-width="100"
                        align="center"
                      ></el-table-column>

                      <el-table-column
                        prop="company"
                        label="公司"
                        min-width="200"
                        align="center"
                      ></el-table-column>

                      <el-table-column
                        prop="department_name"
                        label="部门"
                        min-width="120"
                        align="center"
                      ></el-table-column>

                      <el-table-column
                        prop="pass_name"
                        label="证件种类"
                        min-width="120"
                        align="center"
                      >
                      </el-table-column>

                      <el-table-column min-width="180" align="center">
                        <template slot="header">
                          <div class="table_header_box">
                            <div style="margin-right: 5px">权限区域</div>
                            <i
                              @click="openAreaTips()"
                              style="cursor: pointer"
                              class="el-icon-info"
                            ></i>
                          </div>
                        </template>
                        <template slot-scope="scope">
                          <div></div>
                          <div class="tag_box">
                            <el-popover
                              v-for="(areaItem, index) in formatterAreaFn(
                                scope.row.origin__area_id
                              )"
                              :key="index"
                              placement="top-start"
                              width="200"
                              trigger="hover"
                              :content="areaItem.area_name"
                            >
                              <template #reference>
                                <img
                                  :src="areaItem.area_icon"
                                  slot="reference"
                                  class="area_icon"
                                />
                              </template>
                            </el-popover>

                            <!-- <img :src="areaItem.area_icon" class="area_icon" /> -->
                          </div>
                          <div class="tag_box">
                            <el-popover
                              v-for="(areaItem, index) in formaAreaFn(
                                scope.row.add__area_id
                              )"
                              :key="index"
                              placement="bottom"
                              width="200"
                              trigger="hover"
                              :content="areaItem.area_name"
                            >
                              <template #reference>
                                <img
                                  :src="areaItem.area_icon"
                                  slot="reference"
                                  class="area_icon"
                                />
                                <p class="lings">+</p>
                              </template>
                            </el-popover>

                            <!-- <img :src="areaItem.area_icon" class="area_icon" /> -->
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="status_text"
                        label="审核状态"
                        width="120"
                        align="center"
                      ></el-table-column>
                      <!-- :formatter="formatterStatusFn" -->
                      <el-table-column label="操作" width="160" align="center">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="primary"
                            @click="enrollDetailFn(scope.$index, scope.row)"
                          >
                            查看
                          </el-button>
                          <el-button
                            v-if="usdetype != 2"
                            size="mini"
                            type="danger"
                            @click="enrollDeleteFn(scope.$index, scope.row)"
                          >
                            删除
                          </el-button>
                          <!-- :disabled="userType == 1" -->
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="audit_list_pagination">
                      <el-pagination
                        @size-change="auditListSizeChange"
                        @current-change="auditListCurrentChange"
                        :current-page="enrollCurrentPage"
                        :page-sizes="enrollPageSizes"
                        :page-size="enrollPageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="enrollTotal"
                      >
                      </el-pagination>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-row v-else>
                <el-empty description="暂无数据"></el-empty>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>

    <!-- 弹窗 -->

    <el-dialog
      title="提示"
      :visible.sync="tipsDialogVisible"
      :close-on-click-modal="true"
      width="400px"
    >
      <div class="area_tips_list">
        <div class="area_tips_list_top">
          权限区域图标锁对应权限区域名称如下所示:
        </div>
        <div
          class="area_tips_list_item"
          v-for="(item, index) in areaList"
          :key="index"
        >
          <img class="area_icon" :src="item.area_icon" />
          <div class="area_tips_list_name">{{ item.area_name }}</div>
        </div>
      </div>
    </el-dialog>
    <!-- 照片预览弹窗 -->
    <el-dialog
      :visible.sync="imgDialogVisible"
      :close-on-click-modal="true"
      width="500px"
    >
      <img :src="dialogImg" class="dialog_img" />
    </el-dialog>
    <!-- 导入名单弹窗 -->
    <el-dialog
      title="导入名单"
      :visible.sync="uploadDalogVisible"
      :close-on-click-modal="false"
      width="600px"
      z-index="100"
      :modal="false"
    >
      <addbatch :matchId="this.matchId"></addbatch>
      <el-button size="small" @click="uploadDialogclose()">关 闭</el-button>
    </el-dialog>
  </div>
</template>
<style src="../../assets/css/enroll/enrollList.css" scoped></style>

<script>
import addbatch from "./addbatch.vue";
import { saveAs } from "file-saver";
import JSZip from "jszip";
export default {
  name: "EnrollList",
  components: {
    addbatch,
  },
  data() {
    return {
      usdetype: localStorage.getItem("type"),
      userType: this.$store.state.loginUserType == "ADMINLOGINUSERCH" ? 0 : 1, // 用户类型;1. 普通; 0. 超级;
      baseAPIUrl: this.$store.state.baseAPIUrl,
      loadingKey: false,
      loadingText: "",
      matchId: "", // 赛事名称id
      statusList: [
        {
          key: 1,
          value: "审核中",
        },
        {
          key: 2,
          value: "审核完成",
        },
        {
          key: 3,
          value: "待重新提交审核",
        },
      ], // 审核状态字典
      pohen: [
        {
          key: 1,
          value: "全部",
        },
        {
          key: 2,
          value: "有照片",
        },
        {
          key: 3,
          value: "无照片",
        },
      ],
      is_exist_photo: "",
      //二级联动数据
      areaLisstLIN: "",
      areaccname: "",
      arelisr: "",
      shenhe: "",
      shenhelist: [],
      area: [],
      ares: [],
      enrollListData: [], // 数据列表
      passList: [], //证件类型
      pass: "",
      enrollCurrentPage: 1, // 当前页
      enrollPageSizes: [20, 50, 100, 200, 500], // 可选页容量
      enrollPageSize: 20, // 当前页容量
      enrollTotal: 0, // 总条数
      enrollSearchKey: "", // 搜索关键词
      formLabelWidth: "100px",
      areaList: [], // 权限区域列表
      matchList: [], // 赛事名称列表
      tableSelect: [], // 审核列表勾选
      filterText: "", // 树数据筛选
      defaultProps: {
        children: "children",
        label: "label",
      }, // 树配置
      treeData: [], // 树数据
      companyKey: "", // 筛选--公司
      defaultCheckedKeys: [],
      selectedTreeKey: "", // 被选择节点
      tipsDialogVisible: false, // 权限区域提示显示
      imgDialogVisible: false, // 照片预览
      dialogImg: "",
      actionUrl: "",
      headers: {
        Authorization: this.$store.state.loginToken,
      }, // 导入headers
      uploadFileData: {}, // 导入组件参数
      fileName: "",
      fileList: [],
      uploadDalogVisible: false, // 导入文件弹窗显示
      downloadBtnLoading: false,
      downloadBtnLoadingpuss: false,
      downloadBtnText: "导出名单和照片",
      downloadBtnTextpuss: "导出名单",
      typeid: "", //身份判断
      matchListDatass: [],
      shomee: false,
    };
  },
  created: function () {
    this.getAuditList();
    this.getmatchListDataFn();

    this.typeid = localStorage.getItem("type");
    console.log(this.typeid);
  },

  methods: {
    //审核状态数组
    shenhezuangtai() {
      let that = this;
      let url = "/admin/apply/progressStatusList";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            this.shenhelist = response.list;
            console.log(this.shenhelist);
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 赛事名称选择筛选
    matchSearchFn: function (val) {
      this.matchId = val;
      this.enrollCurrentPage = 1;

      if (this.$route.query.application != "D") {
        this.getAreaListDataFn();
        this.getEnrollListDataFn();
        this.getDepCompanyList();
        this.shenhezuangtai();
        this.passindex();
      } else {
        this.getAreaListDataFn();
        this.getEnrollListDataFn();
      }
    },
    arert() {
      this.arelisr = "";
    },

    //部门列表筛选
    getDepCompanyList() {
      let that = this;
      let url = "/admin/apply/getDepCompanyList";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            this.area = response.dep;
            console.log(response);
            this.area.forEach((item) => {
              if (this.areaLisstLIN == item.department_id) {
                this.ares = item.companys;
              }
              if (item.department_id == this.$route.query.department_id) {
                this.areaLisstLIN = item.department_id;
              }
            });

            console.log(response);
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 搜索按钮
    searchFn: function (key) {
      this.enrollCurrentPage = 1;
      this.getEnrollListDataFn();
    },
    // 获取权限区域列表数据
    getAreaListDataFn: function () {
      let that = this;
      let url = "/admin/area/index";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.areaList = response.list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取赛事名称列表数据
    getmatchListDataFn: function () {
      let that = this;
      let url = "/admin/apply/getEventCompanyListTwo";
      let data = {};
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let treeListData = [];
            // that.treeData = response.event_company;
            response.event_company.forEach((item) => {
              let oneObj = {
                id: item.id,
                label: item.title,
                isFather: 1,
                count: item.total_count,
                children: [],
              };
              if (oneObj.id == this.$route.query.matchId) {
                oneObj.selected = true;
                this.matchId = oneObj.id;
              }
              let list = item.company;
              let key = 0;
              list.forEach((k) => {
                let obj = {
                  id: item.id + "" + key,
                  label: k.company_name,
                  isFather: 2,
                  fatherId: item.id,
                  count: k.count,
                };
                if (obj.label == this.$route.query.companyKey) {
                  obj.selected = true;
                  this.companyKey = obj.label;
                }
                oneObj.children.push(obj);

                key++;
              });
              treeListData.push(oneObj);
            });
            that.treeData = treeListData;
            this.defaultCheckedKeys = this.treeData.flatMap((node) => {
              let temp = [];
              if (node.selected) {
                temp.push(node.id);
                if (node.children) {
                  node.children.flatMap((child) => {
                    if (child.selected) {
                      temp.push(child.id);
                    }
                  });
                }
                return temp;
              } else {
                return [];
              }
            });
            this.getAreaListDataFn();
            this.getDepCompanyList();
            this.shenhezuangtai();
            this.passindex();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取审核列表数据
    getAuditList: function () {
      let that = this;
      console.log("222");
      that.areaLisstLIN = that.$route.query.department_id;
      that.arelisr = that.$route.query.company_two;
      that.enrollSearchKey = that.$route.query.keywords;
      that.is_exist_photo = that.$route.query.is_exist_photo;
      this.shenhe = that.$route.query.shenhe;
      this.pass = that.$route.query.pass;
      that.enrollCurrentPage = that.$route.query.enrollCurrentPage;
      that.enrollPageSize = Number(that.$route.query.enrollPageSize);
      let url = "/admin/apply/index";
      let data = {
        event_id: this.$route.query.matchId,
        page: this.enrollCurrentPage,
        perPage: this.enrollPageSize,
        keywords: this.enrollSearchKey,
        company: this.$route.query.companyKey,
        department_id: that.areaLisstLIN,
        company_two: this.arelisr,
        status: this.shenhe,
        is_exist_photo: this.is_exist_photo,
        pass_id: this.pass,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.enrollListData = response.list;
            that.enrollTotal = response.total_count;
            that.role = response.role;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取报名列表数据
    getEnrollListDataFn: function () {
      let that = this;
      let url = "/admin/apply/index";
      let data = {
        event_id: this.matchId,
        page: this.enrollCurrentPage,
        perPage: this.enrollPageSize,
        keywords: this.enrollSearchKey,
        company: this.companyKey,
        department_id: this.areaLisstLIN,
        company_two: this.arelisr,
        status: this.shenhe,
        is_exist_photo: this.is_exist_photo,
        pass_id: this.pass,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.enrollListData = response.list;
            that.enrollTotal = response.total_count;
            that.role = response.role;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 审核列表页容量改变
    auditListSizeChange: function (val) {
      this.enrollCurrentPage = 1;
      this.enrollPageSize = val;
      this.getEnrollListDataFn();
    },
    // 审核列表当前页改变
    auditListCurrentChange: function (val) {
      this.enrollCurrentPage = val;
      this.getEnrollListDataFn();
    },
    // 列表勾选
    handleSelectionChange: function (val) {
      this.tableSelect = val;

      console.log(this.tableSelect);
    },
    //批量删除
    batchdeleteFn() {
      let all = [];
      this.tableSelect.forEach((item) => {
        all.push(item.id);
      });
      console.log(all);
      let that = this;
      if (all.length > 0) {
        this.$confirm("确认删除该报名?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {
            let url = "/admin/apply/deleteBatch";
            let data = {
              ids: all,
            };
            that.loadingText = "处理中...";
            that.loadingKey = true;
            that.axios
              .post(url, data)
              .then((response) => {
                that.loadingKey = false;
                if (response.code == 0) {
                  that.$message.success("删除成功");

                  that.getEnrollListDataFn();
                } else {
                  that.$message.error(response.msg);
                }
              })
              .catch(function (error) {
                that.loadingKey = false;
                console.log(error);
              });
          })
          .catch(() => {});
      }
    },

    // 审核状态格式化
    formatterStatusFn: function (row) {
      let status = row.status;
      let text = "";
      this.statusList.forEach(function (item) {
        if (item.key == status) {
          text = item.value;
        }
      });
      return text;
    },
    // 设置单元格字体颜色
    cellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 6) {
        if (row.status != 2) {
          style = "color: #F6705E";
        } else {
          style = "color: #8ECF5F";
        }
      }
      return style;
    },
    // 报名列表--查看
    enrollDetailFn: function (index, row) {
      this.$router.push({
        name: "AuditDetail",
        query: {
          id: row.id,
          matchId: this.matchId,
          companyKey: this.companyKey,
          key: "2",
          header: "1",
          application: "D",
          department_id: this.areaLisstLIN,
          company_two: this.arelisr,
          keywords: this.enrollSearchKey,
          enrollCurrentPage: this.enrollCurrentPage,
          enrollPageSize: this.enrollPageSize,
          shenhe: this.shenhe,
          is_exist_photo: this.is_exist_photo,
          pass: this.pass,
        },
      });
    },
    // 查看图片
    imgViewFn: function (index, row) {
      this.imgDialogVisible = true;
      this.dialogImg = row.photo;
    },
    // 新增报名
    addFn: function () {
      let that = this;
      if (that.matchId == "" || that.matchId == null) {
        that.$message.error("请先选择赛事名称");
      } else {
        this.$router.push({
          name: "AddEnroll",
          query: {
            id: that.matchId,
          },
        });
      }
    },
    // 单一新增
    addsinglea() {
      let that = this;
      if (that.matchId == "" || that.matchId == null) {
        that.$message.error("请先选择赛事名称");
      } else {
        this.$router.push({
          name: "Singleadd",
          query: {
            id: that.matchId,
          },
        });
      }
    },
    // 关闭导入弹窗
    uploadDialogclose: function () {
      this.uploadDalogVisible = false;
    },
    //批量新增
    uploadListFn: function () {
      let that = this;
      if (that.matchId == "" || that.matchId == null) {
        that.$message.error("请先选择赛事名称");
      } else {
        this.uploadDalogVisible = true;
      }
    },

    // 报名列表--删除
    enrollDeleteFn: function (index, row) {
      let that = this;
      let url = "/admin/apply/destroy";
      let data = {
        id: row.id,
      };

      this.$confirm("是否导删除该报名?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("删除成功");
              let next = that.enrollCurrentPage - 1;
              if (that.enrollListData.length == 1) {
                that.enrollCurrentPage = next >= 1 ? next : 1;
              }
              that.getmatchListDataFn();
              that.getEnrollListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 权限区域格式化
    formatterAreaFn: function (val) {
      let that = this;
      let list = val.split(",");
      let imgList = [];
      list.forEach((k) => {
        that.areaList.forEach((item) => {
          // console.log(that.areaList);
          if (k == item.id) {
            imgList.push(item);
            // console.log(imgList);
          }
        });
      });

      return imgList;
    },
    formaAreaFn(val) {
      let that = this;
      let list = val.split(",");
      let imgList = [];
      list.forEach((k) => {
        that.areaList.forEach((item) => {
          // console.log(that.areaList);
          if (k == item.id) {
            imgList.push(item);
            // console.log(imgList);
          }
        });
      });

      return imgList;
    },
    // 树节点筛选
    filterNode: function (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 自定义节点
    renderContent: function (h, { node, data, store }) {
      let that = this;
      return (
        <span class="custom_tree_node" ref={"node_" + data.id}>
          <span>{data.label + "(" + data.count + ")"}</span>
        </span>
      );
    },
    // 选择节点
    nodeClick: function (data, list) {
      if (data.isFather == 1) {
        this.companyKey = "";

        this.matchSearchFn(data.id);
      } else {
        this.companyKey = data.label;
        this.matchId = data.fatherId;
        this.enrollCurrentPage = 1;
        if (this.$route.query.application != "D") {
          this.getAreaListDataFn();
          this.getEnrollListDataFn();
          this.getDepCompanyList();
          this.shenhezuangtai();
          this.passindex();
        } else {
          this.getAreaListDataFn();
          this.getEnrollListDataFn();
        }
      }
      this.selectedTreeKey = data.id;
      this.defaultCheckedKeys = [];
      this.defaultCheckedKeys.push(data.id);
      if (list.checkedKeys.length == 2) {
        this.$refs.tree.setCheckedKeys([data.id]);
      }
    },
    // 打开权限区域 提示
    openAreaTips: function () {
      this.tipsDialogVisible = true;
    },
    //筛选证件
    passindex() {
      let that = this;
      let url = "/admin/pass/index";
      let data = {
        event_id: this.matchId,
      };

      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            that.passList = res.list;
          } else {
            that.$message.error(res.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 导出名单
    exportFn: function () {
      if (this.matchId == "" || this.matchId == null) {
        this.$message.error("请先选择赛事名称");
      } else {
        let all = [];
        this.tableSelect.forEach((item) => {
          all.push(item.id);
        });

        let that = this;
        let url = "/excel/exportApply";
        let data = {
          event_id: that.matchId,
          company: this.companyKey,
          department_id: this.areaLisstLIN,
          company_two: this.arelisr,
          keywords: this.enrollSearchKey,
          status: this.shenhe,
          is_exist_photo: this.is_exist_photo,
          apply_ids: all.join(),
          pass_id: this.pass,
        };

        this.$confirm("是否导出名单数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          that.downloadBtnLoading = true;
          that.downloadBtnText = "下载中...";
          that.axios
            .post(url, data, { responseType: "blob" })
            .then((response) => {
              that.loadingKey = false;
              if (response.code == 1) {
                that.downloadBtnLoading = false;
                that.downloadBtnText = "导出名单和照片";
                that.$message.error(response.msg);
              } else {
                let blob = new Blob([response], {
                  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
                });
                // const link = document.createElement("a");
                // 这里是将链接地址url转成blob地址，
                // link.href = URL.createObjectURL(blob);
                // // 下载文件的名称及文件类型后缀
                // link.download = "报名名单.xlsx";
                // document.body.appendChild(link);
                // link.click();
                // // 在资源下载完成后 清除 占用的缓存资源
                // window.URL.revokeObjectURL(link.href);
                // document.body.removeChild(link);
                that
                  .getImgUrlListFn()
                  .then((res) => {
                    if (res) {
                      that.downloadZip(res, blob);
                    }
                  })
                  .catch((err) => {
                    that.$message.error("网络繁忙,请稍后重试");
                  });
              }
            })
            .catch(function (error) {
              that.downloadBtnLoading = false;
              that.downloadBtnText = "导出名单和照片";
              console.log(error);
            });
        });
      }
    },
    // 获取下载照片链接
    getImgUrlListFn: function () {
      let that = this;
      let data = {};
      let all = [];
      this.tableSelect.forEach((item) => {
        all.push(item.id);
      });

      data = {
        event_id: that.matchId,
        company: this.companyKey,
        department_id: this.areaLisstLIN,
        company_two: this.arelisr,
        keywords: this.enrollSearchKey,
        status: this.shenhe,
        is_exist_photo: this.is_exist_photo,
        apply_ids: all.join(),
        pass_id: this.pass,
      };
      let url = "/admin/apply/exportApplyPhoto";
      return new Promise(function (resolve, reject) {
        that.axios
          .post(url, data)
          .then((response) => {
            if (response.code == 0) {
              let list = response.list;
              resolve(list);
            } else {
              that.$message.error(response.msg);
              resolve(false);
            }
          })
          .catch(function (error) {
            reject(error);
          });
      });
    },
    // 下载
    downloadFileFn: function (url) {
      return new Promise((resolve, reject) => {
        fetch(url, {
          mode: "cors",
        })
          .then((res) => res.blob())
          .then((blob) => {
            resolve(blob);
          })
          .catch((error) => {
            that.$message.error("网络错误");
            reject(error.toString());
          });
      });
    },
    // 下载打包
    downloadZip: function (list, excel) {
      let that = this;
      let upList = [];
      let imgList = list;
      const zip = new JSZip();
      const promises = [];

      zip.file("报名名单.xlsx", excel);

      imgList.forEach(function (item) {
        if (
          item.local_photo != null &&
          item.local_photo != "" &&
          item.local_photo != undefined
        ) {
          const typeIndex = item.local_photo.lastIndexOf(".");
          let fileType = item.local_photo.slice(
            typeIndex,
            item.local_photo.length
          );
          let name = item.name + fileType;
          console.log(name);
          upList.push(item);
          const promise = that
            .downloadFileFn(that.baseAPIUrl + "/" + item.local_photo)
            .then((data) => {
              let cil = 0;
              that.downloadNow++;
              cil = Math.floor((that.downloadNow / that.downloadMax) * 100);
              that.downloadBtnText = "下载中 " + cil + "%";
              zip.file(name, data);
            })
            .catch((error) => {
              that.$message.error("网络错误");
            });
          promises.push(promise);
        }
      });
      that.downloadMax = upList.length + 1;
      that.downloadNow = 0;
      Promise.all(promises).then(() => {
        zip
          .generateAsync({
            type: "blob",
          })
          .then((content) => {
            saveAs(content, "报名名单.zip");
            this.downloadBtnLoading = false;
            this.downloadBtnText = "导出名单";
          })
          .catch((error) => {
            that.$message.error("网络错误");
          });
      });
    },

    // 导出名单
    exportFnpuss: function () {
      if (this.matchId == "" || this.matchId == null) {
        this.$message.error("请先选择赛事名称");
      } else {
        let all = [];
        this.tableSelect.forEach((item) => {
          all.push(item.id);
        });
        let that = this;
        let url = "/excel/exportApply";
        let data = {
          event_id: that.matchId,
          company: this.companyKey,
          department_id: this.areaLisstLIN,
          company_two: this.arelisr,
          keywords: this.auditSearchKey,
          status: this.shenhe,
          is_exist_photo: this.is_exist_photo,
          pass_id: this.pass,
          apply_ids: all.join(),
        };

        this.$confirm("是否导出名单数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          that.downloadBtnLoadingpuss = true;
          that.downloadBtnTextpuss = "下载中...";
          that.axios
            .post(url, data, { responseType: "blob" })
            .then((response) => {
              that.loadingKey = false;
              console.log(response);
              if (response.code == 1) {
                that.downloadBtnLoadingpuss = false;
                that.downloadBtnTextpuss = "导出名单";
                that.$message.error(response.msg);
                //
              } else {
                let blob = new Blob([response], {
                  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
                });
                that.downloadZippuss(blob);
              }
            })
            .catch(function (error) {
              that.downloadBtnLoadingpuss = false;
              that.downloadBtnTextpuss = "导出名单";
              console.log(error);
            });
        });
      }
    },

    // 下载
    downloadFileFnpuss: function (url) {
      return new Promise((resolve, reject) => {
        fetch(url, {
          mode: "cors",
        })
          .then((res) => res.blob())
          .then((blob) => {
            resolve(blob);
          })
          .catch((error) => {
            that.$message.error("网络错误");
            reject(error.toString());
          });
      });
    },
    // 下载打包
    downloadZippuss: function (excel) {
      let that = this;
      let upList = [];
      const zip = new JSZip();
      const promises = [];

      zip.file("报名名单.xlsx", excel);

      that.downloadMax = upList.length + 1;
      that.downloadNow = 0;
      Promise.all(promises).then(() => {
        zip
          .generateAsync({
            type: "blob",
          })
          .then((content) => {
            saveAs(content, "报名名单.zip");
            this.downloadBtnLoadingpuss = false;
            this.downloadBtnTextpuss = "导出名单";
          })
          .catch((error) => {
            that.$message.error("网络错误");
          });
      });
    },
  },
  mounted: function () {},
  watch: {
    areaLisstLIN: function (newQuestion, oldQuestion) {
      console.log(newQuestion, "newQuestion");
      for (let i = 0; i < this.area.length; i++) {
        if (newQuestion == this.area[i].department_id) {
          this.areaccname = this.area[i].department_name;
          this.ares = this.area[i].companys;
        }
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>
